<template>
  <div class="form-group">
    <label>选择难度：</label>
    <div class="radio-group horizontal">
      <label 
        class="radio-item"
        v-for="difficulty in difficulties"
        :key="difficulty.value"
      >
        <input 
          type="radio" 
          :checked="modelValue === difficulty.value" 
          @change="updateValue(difficulty.value)" 
        />
        <span>{{ difficulty.label }}</span>
      </label>
    </div>
  </div>
</template>

<script>
import { onMounted } from 'vue'
import { useConfig } from '../../composables/useConfig.js'

export default {
  name: 'DifficultySelector',
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue'],
  setup() {
    const { difficulties, loadConfig } = useConfig()

    // 组件挂载时加载配置
    onMounted(async () => {
      try {
        await loadConfig()
      } catch (error) {
        console.warn('难度选择器配置加载失败:', error)
      }
    })

    return {
      difficulties
    }
  },
  methods: {
    updateValue(value) {
      this.$emit('update:modelValue', value)
    }
  }
}
</script>

<style scoped>
.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 0.5rem;
}

.radio-group {
  display: flex;
  gap: 1rem;
}

.radio-group.horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.75rem 0.65rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: normal;
}

.radio-item:hover {
  border-color: #667eea;
  background-color: rgba(102, 126, 234, 0.05);
}

.radio-item input[type="radio"] {
  margin: 0;
}

.radio-item input[type="radio"]:checked + span {
  color: #667eea;
  font-weight: 600;
}

.radio-item:has(input[type="radio"]:checked) {
  border-color: #667eea;
  background-color: rgba(102, 126, 234, 0.1);
}
</style>